import Access from 'sentry/components/acl/access';
import {Link} from 'sentry/components/core/link';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import Panel from 'sentry/components/panels/panel';
import PanelAlert from 'sentry/components/panels/panelAlert';
import PanelBody from 'sentry/components/panels/panelBody';
import PanelHeader from 'sentry/components/panels/panelHeader';
import PanelItem from 'sentry/components/panels/panelItem';
import {t, tct} from 'sentry/locale';
import type {Plugin} from 'sentry/types/integrations';
import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {useRoutes} from 'sentry/utils/useRoutes';
import RouteError from 'sentry/views/routeError';

import ProjectPluginRow from './projectPluginRow';

type Props = {
  error: React.ComponentProps<typeof RouteError>['error'];
  loading: boolean;
  onChange: React.ComponentProps<typeof ProjectPluginRow>['onChange'];
  organization: Organization;
  plugins: Plugin[];
  project: Project;
};

export default function ProjectPlugins({
  plugins,
  loading,
  error,
  onChange,
  organization,
  project,
}: Props) {
  const routes = useRoutes();

  const hasError = error;
  const isLoading = !hasError && loading;

  if (hasError) {
    return <RouteError error={error} />;
  }

  if (isLoading) {
    return <LoadingIndicator />;
  }
  const params = {orgId: organization.slug, projectId: project.slug};

  return (
    <Access access={['org:integrations']} project={project}>
      {({hasAccess}) => (
        <Panel>
          <PanelHeader>
            <div>{t('Legacy Integration')}</div>
            <div />
          </PanelHeader>
          <PanelBody>
            <PanelAlert type="warning">
              {hasAccess
                ? tct(
                    "Legacy Integrations must be configured per-project. It's recommended to prefer organization integrations over the legacy project integrations when available. Visit the [link:organization integrations] settings to manage them.",
                    {
                      link: <Link to={`/settings/${organization.slug}/integrations/`} />,
                    }
                  )
                : t(
                    "Legacy Integrations must be configured per-project. It's recommended to prefer organization integrations over the legacy project integrations when available."
                  )}
            </PanelAlert>

            {plugins
              .filter(p => {
                return !p.isHidden;
              })
              .map(plugin => (
                <PanelItem key={plugin.id}>
                  <ProjectPluginRow
                    params={params}
                    routes={routes}
                    project={project}
                    {...plugin}
                    onChange={onChange}
                  />
                </PanelItem>
              ))}
          </PanelBody>
        </Panel>
      )}
    </Access>
  );
}
